<template>
	<div class="article-list">
		<template v-if="list.length">
			<article class="excerpt" :class="{'excerpt-first': index === 0, 'excerpt-end': index === list.length - 1}" v-for="(item,index) in list">
				<header>
					<router-link class="cat" :to="{path:'/topics',query:{cate_id:item.cate_id}}" :title="item.title">{{item.cate_name}}<i></i></router-link>
					<h2>
						<router-link class="gotoArchive" :to="`/topics/item_${item.id}.html`" :title="item.title">{{item.title}}</router-link>
					</h2>
				</header>
				<p class="meta">
					<span class="posttime" v-text="item.created_at"></span>
					<span class="viewnum">浏览(<font v-text="item.see_nums"></font>)</span>
					<span class="commentnum">评论(<router-link :to="`/topics/item_${item.id}.html`" v-text="item.comment_nums"></router-link>)</span>
					<span class="praisebtn">  
						<img width="15" height="15" class="praisenum" src="./static/ico_praise.png" />(<a v-text="item.approve_nums"></a>)
					</span>
				</p>
				<p class="note" v-html="'&nbsp&nbsp&nbsp&nbsp'+item.briefly"></p>
				<footer class="entry-footer">
					<span itemprop="keywords" class="tags-links">
						<router-link v-for="tag in item.tags" :key="tag.tag_id" :to="{path:'/topics',query:{tag_id:tag.tag_id}}" :title="tag.tag_name">{{tag.tag_name}}
						</router-link>
					</span>
					<router-link class="more-link gotoArchive" :to="`/topics/item_${item.id}.html`" :title="item.title">继续阅读 »</router-link>
				</footer>
			</article>
		</template>
		<template v-else>
			<p class="empty-item-result">没有找到数据哦~</p>
		</template>
	</div>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		}
	}
</script>

<style lang="scss" scope>
	.article-list {
		.empty-item-result {
			text-align: center;
			color: #afa8a8;
		}
		.excerpt-first {
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
		}
		.excerpt-end {
		   	border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
		}
		.excerpt {
			border: 1px solid #eaeaea;
		    padding: 20px 20px 20px 20px;
		    overflow: hidden;
		    background-color: #fff;
		    margin-bottom: 10px;
		    &:hover {
			    background-color: #f9f9f9;
			    position: relative;
			}
			header {
				margin-bottom: 5px;
				h2 {
					display: inline;
				    font-size: 18px;
				    line-height: 24px;
				    margin-top: 0;
				    font-weight: 600;
				    a{
						color: #3d4450;
					}
				}
				.cat {
					color: #fff;
				    background-color: #45bcf9;
				    padding: 3px 6px;
				    font-size: 12px;
				    display: inline-block;
				    position: relative;
				    top: -2px;
				    margin-right: 6px;
				    &:hover {
					    opacity: .85;
					    filter: alpha(opacity=85);
					}
				}
			}
			.meta {
				color: #838383;
			    font-size: 12px;
			    margin-bottom: 5px;
			    overflow: hidden;
			    clear: both;
			    display: inline-block;
			    width: 100%;
			    .posttime {
				    background: url('./static/ico_time.png') no-repeat left center;
				}
				.viewnum {
				    background: url(./static/ico_eye.png) no-repeat left center;
				    cursor: default;
				    >font {
						color: #337ab7;
					}
				}
				.commentnum {
				    background: url(./static/ico-chat.png) no-repeat left center;
				}
				span {
				    margin: 0 10px 0 0;
				    padding-left: 20px;
				}
				.praisebtn {
					padding-left: 0 !important;
					cursor: default;
				}
			}
			.note {
			    font-size: 14px;
			    color: #838383;
			    word-wrap: break-word;
			    line-height: 20px;
			    height: 60px;
			    display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			    cursor: default;
				overflow: hidden;
			}
			.entry-footer {
			    height: auto!important;
			    margin: 15px 20px 15px 0;
			    min-height: 1.5em;
			    position: relative;
			    .tags-links {
				    font-size: 12px;
				    -webkit-transition: opacity .3s;
				    -moz-transition: opacity .3s;
				    transition: opacity .3s;
				    a {
					    margin-right: .5em;
					    padding: 2px 4px;
					    border-radius: 2px;
					    background: #ccc;
					    color: #fff;
					    -webkit-transition: background .3s;
					    -moz-transition: background .3s;
					    transition: background .3s;
					    opacity: .7;
					    &:nth-child(5n) {
							background-color:#ffbb50
						}
						&:nth-child(5n+1) {
							background-color:#19b5fe
						}
						&:nth-child(5n+2) {
							background-color:#00bb9c
						}
						&:nth-child(5n+3) {
							background-color:#1ac756
						}
						&:nth-child(5n+4) {
							background-color:#ff5e5c
						}
						&:before {
							content:"#"
						}
						&:hover {
							background-color:#1b1b1b;
							color:#fff
						}
					}
				}
				.more-link {
					float:right;
					color:#16a085
				}
			}
		}
	}
</style>